// web/src/app/(employee)/search/_components/search-input.tsx
'use client';
import React, {useEffect} from 'react';
import {Search} from "lucide-react";
import {Input} from "@/components/ui/input";
import {useDebounce} from "@/components/learn/use-debounce";
import {usePathname, useRouter, useSearchParams} from "next/navigation";
import qs from "query-string";

const SearchInput = () => {
    const [value, setValue] = React.useState('');
    const debouncedValue = useDebounce(value)

    const searchParams = useSearchParams()
    const pathname = usePathname()
    const router = useRouter()

    const currentValue = searchParams.get('value')

    useEffect(() => {
        const url = qs.stringifyUrl({
            url: pathname,
            query: {
                value: currentValue,
                title: debouncedValue // value改变后, delay时间后没有继续继续改变就更新该值
            }
        }, {skipEmptyString: true, skipNull: true})

        router.push(url)
    }, [debouncedValue, currentValue, router, pathname]);

    return (
        <div className={`relative`}>
            <Search className={`size-4 absolute top-3 left-3 text-slate-600`}/>
            <Input
                onChange={(e) => setValue(e.target.value)}
                value={value}
                className={`w-full md:w-[300px] pl-9 rounded-full
                 bg-slate-100 focus-visible:ring-slate-200`}
                placeholder={`Search for a course`}
            />
        </div>
    );
};

export default SearchInput;